<template>
  <div class="container zwxBox">
    <el-card class="box-card">
      <!-- 新增按钮 -->
      <el-row type="flex" class="row-bg" justify="space-between">
        <!-- <el-col :span="4" style="color: #ffc0cb; font-size: 12px"> -->
          <span style="color: #ffc0cb; font-size: 12px">
          说明：目前支持学科和关键字条件筛选
          </span>
        <!-- </el-col> -->
        <!-- <el-col :span='2'> -->
          <el-button
            title="新增试题"
            type="success"
            size="small"
            icon="el-icon-edit"
            @click="$router.push({ path: 'new' })"
            >新增试题</el-button
          >
        <!-- </el-col> -->
      </el-row>
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
        ref="FormRef"
      >
        <!-- 第一行 -->
        <el-row :gutter="24" class="row-bg">
          <el-col :span="6">
            <el-form-item label="学科" label-width="70px">
              <el-select v-model="formInline.subjects" placeholder="请选择">
                <el-option
                  :label="item.label"
                  :value="item.value"
                  v-for="item in labelSubjects"
                  :key="item.value"
                  @click.native="changeSize"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录">
              <el-select v-model="formInline.catalogue" placeholder="请选择">
                <el-option
                  :label="item.label"
                  :value="item.value"
                  v-for="item in catalogue"
                  :key="item.value"
                ></el-option>
              </el-select> </el-form-item
          ></el-col>
          <el-col :span="6">
            <el-form-item label="标签">
              <el-select v-model="formInline.tag" placeholder="请选择">
                <el-option
                  :label="item.label"
                  :value="item.value"
                  v-for="item in tag"
                  :key="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字" placeholder="根据题干搜索">
              <el-input v-model="formInline.keyword"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第二行 -->
        <el-row :gutter="24" class="row-bg" justify="center" type="flex">
          <el-col :span="6">
            <el-form-item label="试题类型">
              <el-select v-model="formInline.questionType" placeholder="请选择">
                <el-option
                  :label="item.label"
                  :value="item.value"
                  :key="item.value"
                  v-for="item in questionType"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="难度" label-width="70px">
              <el-select v-model="formInline.difficulty" placeholder="请选择">
                <el-option
                  :label="item.label"
                  :value="item.value"
                  :key="item.value"
                  v-for="item in difficulty"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方向">
              <el-select v-model="formInline.direction" placeholder="请选择">
                <el-option
                  :label="item"
                  :value="item"
                  :key="index"
                  v-for="(item, index) in direction"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入人">
              <el-select v-model="formInline.super" placeholder="请选择">
                <el-option
                  :label="item.username"
                  :value="item.username"
                  :key="item.id"
                  v-for="item in Super"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第三行 -->
        <el-row :gutter="24" class="row-bg">
          <el-col :span="6">
            <el-form-item label="题目备注">
              <el-input v-model="formInline.subject"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称">
              <el-input v-model="formInline.enterprise"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" class="citry">
            <el-form-item label="城市">
              <el-select v-model="formInline.provinces" placeholder="请选择">
                <el-option
                  :label="item"
                  :value="item"
                  v-for="(item, index) in provinces"
                  :key="index"
                  @click.native="getCitys"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select v-model="formInline.city" placeholder="请选择">
                <el-option
                  :label="item"
                  :value="item"
                  v-for="(item, index) in city"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" class="btn">
            <el-button @click="clearAll" size="small">清除所有</el-button>
            <el-button type="primary" @click="searchClick" size="small"
              >搜索</el-button
            >
          </el-col>
        </el-row>
      </el-form>
      <!-- 失败提示的文案 -->
      <el-alert type="info" style="margin-top: 10px; margin-bottom: 10px" show-icon>
        数据共{{ total }}条
      </el-alert>
      <!-- 表格 -->
      <el-table :data="tableData" style="width: 100%; margin-bottom: 20px">
        <!-- 第一个 -->
        <el-table-column prop="number" label="试题编号"> </el-table-column>
        <!-- 第二个 -->
        <el-table-column prop="subject" label="学科"> </el-table-column>
        <!-- 第三个 -->
        <el-table-column prop="catalog" label="目录"> </el-table-column>
        <!-- 第四个 -->
        <el-table-column prop="questionType" label="题型">
          <template #default="{ row }">
            <span v-if="+row.questionType === 1">单选</span>
            <span v-else-if="+row.questionType === 2">多选</span>
            <span v-else>多容</span>
          </template>
        </el-table-column>
        <!-- 第五个 -->
        <el-table-column prop="question" label="题干" width="280">
          <template slot-scope="scope">
            <div v-html="scope.row.question"></div>
          </template>
        </el-table-column>
        <!-- 第六个 -->
        <el-table-column prop="addDate" label="录制时间">
            <template #default={row}>
          {{row.addDate | parseTimeByString}}
      </template>
        </el-table-column>
        <!-- 第七个 -->
        <el-table-column prop="difficulty" label="难度">
          <template #default="{ row }">
            <span v-if="+row.difficulty === 1">简单</span>
            <span v-else-if="+row.difficulty === 2">一般</span>
            <span v-else>困难</span>
          </template>
        </el-table-column>
        <!-- 第八个 -->
        <el-table-column prop="creatorID" label="录入人">
          <template #default="{ row }">
            <span v-if="+row.creatorID === 1">录入管理员</span>
            <span v-else-if="+row.creatorID === 2">超级管理员</span>
          </template>
        </el-table-column>
        <!-- 第九个====四个按钮 -->
        <el-table-column label="操作" width="200">
          <template #default="{ row }">
            <el-button
              title="预览"
              type="success"
              icon="el-icon-view"
              circle
              @click="openDialog(row.id)"
              plain
            ></el-button>

            <el-button
              title="修改"
              type="info"
              icon="el-icon-edit"
              circle
              plain
              @click="$router.push({ path: 'new', query: { id: row.id } })"
            >
            </el-button>
            <el-button
              title="删除"
              type="danger"
              icon="el-icon-delete-solid"
              circle
              @click="clearClick(row.id)"
              plain
            ></el-button>
            <el-button
              title="加入精选"
              type="warning"
              icon="el-icon-check"
              circle
              @click="confirmClick(row.id)"
              plain
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[1, 2, 3, 5, 10]"
          :current-page="page"
          :page-size="pagesize"
          layout="prev,pager,next,sizes, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>
    <tc-dialog
      :dialogVisible.sync="dialogVisible"
      :SonList="SonList"
    ></tc-dialog>
  </div>
</template>

<script>
import {
  list as res,
  detail,
  remove,
  choiceAdd
} from '@/api/hmmm/questions.js'
// 学科的接口
import { simple as getsimple } from '@/api/hmmm/subjects.js'
// 标签的接口
import { simple as tag } from '@/api/hmmm/tags.js'
// 目录
import { simple as catalogue } from '@/api/hmmm/directorys.js'
// 试题类型
import { questionType, difficulty, direction } from '@/api/hmmm/constants.js'
// 用户资料
import { simple as user } from '@/api/base/users.js'
// ==================城市 县城
import { provinces, citys } from '@/api/hmmm/citys.js'
import '@/styles/questions.scss'
// 弹层================= 组件
import tcDialog from './cmp/tc-dialog.vue'
export default {
  components: { tcDialog },
  data () {
    return {
      SonList: {},
      name: 'Questions',
      provinces: [], // 城市
      city: [],
      direction, // 方向
      difficulty, // 难度
      questionType, // 试题类型
      dialogVisible: false, // 弹层显示与隐藏
      page: 1, // 否 1 当前页数
      total: 0, // 总条数
      pagesize: 5, // 否 10 页尺寸
      // 学科的下拉框
      labelSubjects: [],
      // 二级目录的下拉框
      catalogue: [],
      // 标签的下拉框
      tag: [],
      // 用户
      Super: [],
      // 这是form的数据
      formInline: {
        enterprise: '',
        subject: '', // 题目备注
        user: '',
        region: '',
        subjects: '', // 学科
        catalogue: '', // 二级目录
        tag: '', // 标签
        keyword: '', // 关键字
        questionType: '', // 试题类型
        difficulty: '', // 难度
        direction: '', // 方向
        super: '', // 管理员
        provinces: '', // 城市
        city: '' // 县城
      },
      // 这是表格的数据
      // 这是表格的数据
      tableData: [
        // 模拟假的数据
      ]
    }
  },
  computed: {},
  created () {
    this.getList()
    this.getSimple()
    this.getUser()
    // console.log()
    // 赋值城市
    this.provinces = provinces()
  },
  methods: {
    // 搜索
    async searchClick () {
      // console.log(this.formInline.subjects, this.formInline.keyword)
      // console.log(11)
      if (
        !String(this.formInline.subjects).trim() &&
        !this.formInline.keyword.trim()
      ) {
        return this.$message.info('输入不能为空')
      }
      if (this.formInline.subjects && this.formInline.keyword) {
        const { data: { items } } = await res({
          subjectID: this.formInline.subjects,
          keyword: this.formInline.keyword,
          page: this.page,
          pagesize: this.pagesize
        })
        this.tableData = items
      } else if (this.formInline.keyword) {
        const { data: { items } } = await res({
          keyword: this.formInline.keyword,
          page: this.page,
          pagesize: this.pagesize
        })
        this.tableData = items
      } else if (this.formInline.subjects) {
        const { data: { items } } = await res({
          subjectID: this.formInline.subjects,
          page: this.page,
          pagesize: this.pagesize
        })
        this.tableData = items
      }
    },
    // 清除所有的表单
    clearAll () {
      // console.log()
      this.formInline = {
        enterprise: '',
        subject: '', // 题目备注
        user: '',
        region: '',
        subjects: '', // 学科
        catalogue: '', // 二级目录
        tag: '', // 标签
        keyword: '', // 关键字
        questionType: '', // 试题类型
        difficulty: '', // 难度
        direction: '', // 方向
        super: '', // 管理员
        provinces: '', // 城市
        city: '' // 县城
      }
      this.getList()
    },
    // 获取====县级
    getCitys () {
      this.city = citys(this.formInline.provinces)
    },
    // 获取管理员
    async getUser () {
      const { data } = await user()
      this.Super = data
    },
    // 获取标签
    async changeSize () {
      const { data } = await catalogue({ subjectID: this.formInline.subjects })
      const { data: data1 } = await tag({
        subjectID: this.formInline.subjects
      })
      // console.log(data1, data)
      this.tag = data1
      this.catalogue = data
      this.formInline.catalogue = ''
      this.formInline.tag = ''
    },

    // 获取学科
    async getSimple () {
      const { data } = await getsimple()
      this.labelSubjects = data
    },
    // 获取列表数据
    async getList () {
      const { data } = await res({ page: this.page, pagesize: this.pagesize })
      this.tableData = data.items
      this.total = data.counts
    },

    async openDialog (id) {
      this.dialogVisible = true
      const { data } = await detail({ id })
      this.SonList = data
    },
    // 加入精选操作
    confirmClick (id) {
      this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      })
        .then(async () => {
          await choiceAdd({ id, choiceState: 1 })
          if (this.tableData.length === 1 && this.page > 1) {
            this.page--
          }
          this.$message.success('加入精选成功')
          this.getList()
        })
        .catch(() => {
          this.$message.info('加入精选失败')
        })
    },
    // 删除操作
    clearClick (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await remove({ id })
          if (this.tableData.length === 1 && this.page > 1) {
            this.page--
          }
          this.$message.success('删除成功')
          this.getList()
        })
        .catch(() => {
          this.$message.info('删除失败')
        })
    },
    handleSizeChange (val) {
      this.pagesize = val
      this.page = 1
      this.getList()
    },
    handleCurrentChange (val) {
      this.page = val
      this.getList()
    }
  }
}
</script>

<style scoped lang='scss'>
</style>
